<template>
  <div class="media-container">
    <div class="header">
      <el-button type="primary" @click="dialogVisible = true"
        >添加附件</el-button
      >
    </div>
    <!-- 导入附件管理组件 -->
    <media :media-data="mediaData" is-show-delete-icon @delete="del" />
    <!-- 添加附件的表单 -->
    <el-dialog title="上传附件" :visible.sync="dialogVisible" width="30%">
      <el-upload
        class="avatar-uploader"
        :action="$API + '/upload'"
        :on-success="uploadSuccess"
        :before-upload="uploadBefore"
        :show-file-list="false"
      >
        <div class="el-upload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </div>
      </el-upload>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="upload">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import media from '@/components/media'
import { reqGetMedia, reqDelMedia, reqAddMedia } from '@/api'

export default {
  data() {
    return {
      dialogVisible: false,
      mediaData: [],
      imageUrl: '',
      path_url: '',
    }
  },
  methods: {
    // 上传图片入库，调用接口
    async upload() {
      if (!this.path_url) {
        this.$message({
          message: '还没有上传',
          type: 'error',
        })
        return
      }
      // let { code } = await reqAddMedia(this.path_url)
      // if (code === 20000) {
      this.$message({
        message: '上传附件到服务器成功',
        type: 'success',
      })

      this.dialogVisible = false
      this.imageUrl = ''
      this.path_url = ''
      // 重新加载图片
      this.loadMedia()
      // }
    },
    // 上传成功的函数
    uploadSuccess(res, file) {
      console.log('上传成功', file)
      this.imageUrl = URL.createObjectURL(file.raw)
      // 判断
      let { code, message, path } = file.response
      if (code === 20000) {
        this.$message({
          message,
          type: 'success',
        })
        this.path_url = path
      }
    },
    uploadBefore(file) {
      console.log('Before', file)
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    async del({ id }) {
      console.log('del', id)
      try {
        await this.$confirm('确认要删除吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })

        await reqDelMedia(id)
        // 重新加载媒体数据
        // 获取所有的媒体数据
        this.loadMedia()
      } catch (err) {}
    },

    async loadMedia() {
      // 获取所有的媒体数据
      let result = await reqGetMedia()
      result = result.map((item) => {
        item.path_url = this.$API + '/' + item.path_url
        return item
      })
      this.mediaData = result
    },
  },
  components: {
    media,
  },
  async mounted() {
    this.loadMedia()
  },
}
</script>

<style lang="scss" scoped>
.media-container {
  .header {
    margin: 10px 0;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
